<template>
  <div class="left-container">
    <div class="left-search">
      <a-form
        :model="props.PageDataHooks.dataInfo.searchForm"
        ref="leftSearchRefForm"
        class="label-form"
      >
        <a-form-item :field="props.PageDataHooks.dataInfo.field" label-col-flex="0px">
          <a-input-search
            v-model="
              props.PageDataHooks.dataInfo.searchForm[props.PageDataHooks.dataInfo.field]
            "
            :placeholder="props.PageDataHooks.dataInfo.placeholder"
            :style="{ width: '272px', height: '32px' }"
            allow-clear
            @keydown.enter="props.PageDataHooks.handleSearch"
          ></a-input-search>
        </a-form-item>
        <a-button
          type="primary"
          :style="{ height: '32px' }"
          @click="props.PageDataHooks.handleSearch"
          >查 询</a-button
        >
      </a-form>
    </div>
    <div class="add-btn">
      <i class="iconfont icon-xinjian1"></i>
      <span>新建标签</span>
    </div>
    <div class="left-list">
      <a-list :bordered="false" :split="false" class="label-list">
        <a-list-item
          v-for="(item, index) in props.PageDataHooks.dataInfo.listData"
          :key="item.id"
          :class="['label-list-item', { active: selectedIndex === index }]"
          action-layout="horizontal"
          @click.stop="
            () => {
              handleClick(index);
            }
          "
          ref="itemArr"
        >
          {{ item.name }}
          <template #actions>
            <icon-edit @click.stop="() => props.PageDataHooks.handleLabelEdit(item)" />
          </template>
        </a-list-item>
      </a-list>
    </div>
  </div>
</template>
<script lang="ts" setup name="LabelLeft">
import { ref, watchEffect } from "vue";
import Vector from "@/assets/images/Vector 77.svg";
import { getPermCode } from "@/views/configCenter/utils/useBaseData";
const leftSearchRefForm = ref();
interface Prop {
  PageDataHooks: MarkPage.PageDataHooks;
}
const props = defineProps<Prop>();
//列表项ref
const itemArr = ref([]);
//选中下标
const selectedIndex = ref(0);
const handleClick = (idx: any) => {
  selectedIndex.value = idx;
};
watchEffect(() => {
  if (props.PageDataHooks.dataInfo.listData.length === 0) return;
  const item = props.PageDataHooks.dataInfo.listData[selectedIndex.value];
  props.PageDataHooks.handleLabelClick(item);
});
</script>
<style lang="less" scoped>
@import url("../styles/markPage.less");
</style>
